<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>基金投资板块</title>
</head>

<!--layui的CSS样式-->
<link type="text/css" rel="stylesheet" href="../lib/layuimini/lib/layui-v2.5.5/css/layui.css"/>
<!--layui的js-->
<script src="../lib/layuimini/lib/layui-v2.5.5/layui.js"></script>
<!--第三方下拉表格js-->
<script src="../lib/layuimini/js/lay-config.js"></script>
<!--自己js的路径-->
<!--<script type="text/javascript" src="./js/fundPortfolioTable.js.js"></script>-->


<body>


<div class="layui-inline layui-show-xs-block">
    <label class="layui-form-label layui-bg-gray" style="width: 110px;text-align: center">统计日期</label>
    <div class="layui-inline layui-show-xs-block" style="width: 195px">
        <input class="layui-input"  name="dateTime" id="start">
    </div>
</div>
<div class="layui-inline layui-show-xs-block">
    <button class="layui-btn layui-btn-primary" lay-submit="" lay-event="search" lay-filter="sreach" id="sreach"><i class="layui-icon">&#xe615;</i>搜索
    </button>
    <button class="layui-btn layui-btn-primary" lay-submit="" lay-event="search" lay-filter="sreach" id="sreach1"><i class="layui-icon">&#xe629;</i>饼状图
    </button>
</div>
<table class="layui-hide" id="test" lay-filter="test"></table>
<!--从session里拿基金id th标签拿-->
<input type="hidden" id="fundId" name="fundId" th:value="${session.fundId}">

<!--这个是饼状图的弹框层的div-->
<div id="main2">
    <div id="main" style="width: 600px;height:400px;position:absolute;top:50%;left: 50%;margin-top: -200px;margin-left: -300px;"></div>
</div>

</body>
</html>

<script>
    layui.use(['element', 'form', 'table', 'layer', 'laydate'], function () {
        var layer = layui.layer;
        var $ = layui.$;
        var table = layui.table;
        var form = layui.form;
        var laydate = layui.laydate;

        var time = new Date();
        var date1 = time.getFullYear();
        if (time.getMonth()<10){
            date1=date1+"-0"+(time.getMonth()+1);
        }else {
            date1=date1+"-"+(time.getMonth()+1);
        }
        if (time.getDate()<10){
            date1=date1+"-0"+time.getDate();
        }else {
            date1=date1+"-"+time.getDate();
        }

        laydate.render({
            elem: '#start',
            type: 'date' ,//默认，可不填
            value: new Date()//获取当前时间
        });
        var fundId=$('#fundId').val();

        table.render({
            elem: '#test'
            , url: '../fundInvestPlateTables/selectFundPortfolioTable?Date='+date1+' &fundId='+fundId

            , defaultToolbar: ['filter', 'exports', 'print']
            ,height:'full-55'
            , minLength: 80

            , cols : [
                [
                    {
                        checkbox : true
                    },
                    {
                        field : 'plateName',
                        align: 'center',
                        title : '证券板块名称',
                        Width:160
                    }, {
                    field : 'quantity',
                    align: 'center',
                    title : '证券库存数量',
                    Width:160
                },
                    {
                        field : 'marketValue',
                        title:'证券市值',
                        align: 'center',
                        Width:160
                    },
                    {
                        field : 'marketValueStatistics',
                        title:'市值占净值%',
                        align: 'center',
                        Width:160,
                        templet :function(i){
                            if(i.valuespoint==null){
                                return '';
                            }
                            else{
                                return i.valuespoint+"%";
                            }

                        }
                    }
                ]
            ]
            , page: true

        });
        var timeTwo = $('#start').val();
        $('#sreach').click(function(){
            laydate.render({
                elem: '#start',
                type: 'date' ,//默认，可不填
                value: timeTwo//获取当前时间
            });
            table.render({
                elem: '#test'
                , url: '../fundInvestPlateTables/selectFundPortfolioTable?Date='+$('#start').val()+' &fundId='+fundId

                , defaultToolbar: ['filter', 'exports', 'print']
                ,height:'full-55'
                , minLength: 80

                , cols : [
                    [
                        {
                            checkbox : true
                        },
                        {
                            field : 'plateName',
                            align: 'center',
                            title : '证券板块名称',
                            Width:160
                        }, {
                        field : 'quantity',
                        align: 'center',
                        title : '证券库存数量',
                        Width:160
                    },
                        {
                            field : 'marketValue',
                            title:'证券市值',
                            align: 'center',
                            Width:160
                        },
                        {
                            field : 'marketValueStatistics',
                            title:'市值占净值%',
                            align: 'center',
                            Width:160,
                            templet :function(i){
                                if(i.valuespoint==null){
                                    return '';
                                }
                                else{
                                    return i.valuespoint+"%";
                                }

                            }
                        }
                    ]
                ]
                , page: true
                ,});


        })

        $('#sreach1').click(function(){
            $("#main").css("display","block");
            var myChart = echarts.init(document.getElementById("main"));//main是<div id="main" style="width: 600px;height:400px;"></div>的id

            // 指定图表的配置项和数据
            var names=[];
            var values=[];
            //数据加载完之前先显示一段简单的loading动画
            myChart.showLoading();
            $.ajax({
                type : "post",
                async : true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
                url: '../fundInvestPlateTables/selectFundPortfolioTable2?Date='+$('#start').val()+' &fundId='+fundId,    //请求发送到dataActiont处
                data : {},
                dataType : "json",        //返回数据形式为json
                success : function(result) {
                    //请求成功时执行该函数内容，result即为服务器返回的json对象
                    if (result) {
                        for(var i=0;i<result.length;i++){
                            names.push(result[i].name);
                            values.push(result[i].value);
                        }
                        myChart.hideLoading();    //隐藏加载动画
                        myChart.setOption(
                            {
                                title: {
                                    text: '证券投资板块表',
                                    x: 'center'
                                },
                                tooltip: {
                                    trigger: 'item',
                                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                                },
                                legend: {
                                    orient: 'vertical',
                                    left: 'left',
                                    data: names
                                },
                                series: [
                                    {
                                        type: 'pie',
                                        radius: '55%',
                                        center: ['50%', '60%'],
                                        data: result,
                                        itemStyle: {
                                            emphasis: {
                                                shadowBlur: 10,
                                                shadowOffsetX: 0,
                                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                                            }
                                        }
                                    }
                                ]
                            }
                        );
                    }
                },
                error : function(errorMsg) {
                    //请求失败时执行该函数
                    alert("图表请求数据失败!");
                    myChart.hideLoading();
                }
            });//end ajax
            var index=layer.open({
                type: 1,
                title: false ,
                closeBtn: false,
                move:false,
                area: ['90%', '80%'],
                shade: 0.8,
                content:$("#main2"),
                btn:['关闭'],
                yes: function(index, layero){
                    $("#main").css("display","none");
                    layer.closeAll();

                }
            });





        })

    })

</script>